<template>
  <div>
    <el-dialog v-model="data.dialogVisible" append-to-body :close-on-click-modal='false' :show-close='false'
      :align-center="true" modal-class="AddBigModal" @close="close">
      <template #title>
        <div class='resetDiaLogTitle'>
          <div>
            {{ title }}
          </div>
          <div>
            <el-icon style="font-size: 22px;" @click="() => close()">
              <Close />
            </el-icon>

          </div>
        </div>
      </template>

      <div>
        <div class="collapseLine">
          <div class="leftIcon">
            <el-icon @click="() => { collapseObj.hideBasic = !collapseObj.hideBasic ? true : false }">
              <ArrowDown v-if="!collapseObj.hideBasic" />
              <ArrowRight v-else />
            </el-icon>
          </div>
          <div>
            基本信息
          </div>
        </div>
        <div class="formParent" :style="collapseObj.hideBasic ? { height: '0px', padding: 0, marginBottom: '10px' } : {}">
          <form-show v-model="queryForm" :formConfig="formConfig" />
        </div>
      </div>
      <div>
        <div class="collapseLine">
          <div class="leftIcon">
            <el-icon @click="() => { collapseObj.hideDetail = !collapseObj.hideDetail ? true : false }">
              <ArrowDown v-if="!collapseObj.hideDetail" />
              <ArrowRight v-else />
            </el-icon>
          </div>
          <div>
            明细信息
          </div>
          <div>
            <el-button-group>
              <el-button @click="addTableOne">
                新增
              </el-button>
              <el-button @click="copyTable">
                复制
              </el-button>
              <el-button @click="deleteTable">
                删除
              </el-button>
            </el-button-group>
          </div>
        </div>
        <div ref="suixinx" :style="{ height: collapseObj.hideDetail ? '0px' : '', overflow: 'hidden' }">
          <div :style="{ height: data.height + 'px' }" class="showTable">
            <vxe-grid ref="xGrid" v-bind="gridOptions" keep-source :data="data.tableData"
              @checkbox-change="checkboxChange" @checkbox-all="checkboxChange">
            </vxe-grid>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="() => close()">取消</el-button>
          <el-button @click="() => submit()">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
   


  </div>
</template>

<script setup>

import { defineProps, ref, reactive, defineEmits, computed, onMounted } from 'vue'; //获取父组件传的props和向父组件发送方法
import FormShow from '/@/components/Form/index.vue'
import XEUtils from 'xe-utils'
import { checkFormData } from '/@/libs/common.js'
import { formsUp, tableDown } from './form';
import { ElMessage } from 'element-plus'

import {quoteGet,quoteEdit } from '/@/api/zhu.js'




// 通用表单的设置   取消确认按钮  title标题  内容区间 校验

// 获取父组件的传参
const props = defineProps({
  editData: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    default: '新增'
  }
});
const emits = defineEmits(['updateMethod']);


// 定义属性使用区域
const suixinx = ref(null)
const xGrid = ref(null)

let data = reactive({ dialogVisible: true, tableData: [], openLook: false, rowLook: {} });
let queryForm = reactive({});
const collapseObj = reactive({});



const beforeEditMethod = (e) => {
  // 对当前单元格做判断 是否可以编辑
  let { column, row, cell } = e;

  console.log(e);
  if (e.rowIndex == '3') {
    return false
  }
  // return false
  return true

}
// 计算属性使用区域
const formConfig = computed(() => {
  return {
    inline: true,
    size: "mini",
    labelWidth: '100px',
    formItemList: formsUp(data),
  };
})
let gridOptions = reactive({
  border: true,
  round: true,
  height: '100%',
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showIcon: false,
    beforeEditMethod: beforeEditMethod
  },
  columns: tableDown(data),
  editRules: {
    // materialNo: [{ required: true, message: '请选择物料', trigger: 'blur' }],
    // processMode: [{ required: true, message: '请选择加工工艺', trigger: 'blur' }],
  },
  validConfig: {
    autoPos: false,
    showMessage: true
  }
})

// 生命周期使用区域
onMounted(() => {
  setTimeout(() => {
    let { top = 0 } = suixinx.value.getBoundingClientRect();
    data.height = window.innerHeight - top - 120;
  }, 400);

  quoteGet(props.editData.id).then(res=>{
    let {dtlList,...other}=res.data.data;
    for(let i in other){
      queryForm[i]=other[i]
    }
    data.tableData=dtlList
  })
  

  // 
})



// 定义的方法使用区域
// 关闭按钮
const close = (boo = false) => {
  data.dialogVisible = false;
  setTimeout(() => {
    emits('updateMethod', queryForm, boo)
  }, 300);
}

// 提交按钮
const submit = async () => {
  let formItemList = formConfig.value.formItemList;
  let bool = checkFormData(formItemList, queryForm);
  let checkTableOne = false;

  // 插入数据  删除数据  变更数据
  let { insertRecords = [], removeRecords = [], updateRecords = [] } = xGrid.value.getRecordset()
  let { tableData } = xGrid.value.getTableData();

  if (!bool) { return }
  await xGrid.value.validate(tableData).catch((errMap) => errMap).then(errMap => {
    if (errMap) {
      const { rule, rowIndex } = errMap[Object.keys(errMap)[0]][0]
      const { $options } = rule
      ElMessage.error('第' + (rowIndex + 1) + '行数据有误：' + $options.message)
      checkTableOne = false
    } else {
      checkTableOne = true;
    }
  })
  if (!checkTableOne) { return }

  quoteEdit({dtlList:data.tableData,...queryForm}).then(res=>{
    if(res.data.success){
      close(true);
     
    }
  })



  
}


// 新增明细行
const addTableOne = () => {
  let obj = { processMode: '', dateZ: '2020-09-01', materZ: 'suu' };//是否需要默认赋值
  xGrid.value.insertAt(obj, -1)
}
// 明细行选中
const checkboxChange = (value) => {
  data.selectionData = value.records
}
// 复制明细行
const copyTable = () => {
  if (!data.selectionData || !data.selectionData.length) {
    ElMessage.error('请选择数据！')
  }
  xGrid.value.insertAt(data.selectionData.map(item => {
    let { _X_ROW_KEY, ...other } = item;
    return other
  }), -1);
}
// 删除明细行
const deleteTable = () => {
  xGrid.value.removeCheckboxRow();
  data.selectionData = [];
}

// lookUp
const sendSure = (e, boo = false) => {
  data.openLook = false;
  if (boo) {
    for (let i in e) {
      data.rowLook[i] = e[i]
    }
  }
}


</script>

<style scoped lang="less" src="./edit.less"></style>